import axios, {
  AxiosError,
  AxiosResponse,
  Method,
  RawAxiosRequestHeaders,
} from "axios";
import redux from "@/store";
import router from "@/router";

// 判断环境, 使用不同的api
// development 开发过程中的环境(测试)
// production  生产环境
// 在编译的时候执行
// process.env.NODE_ENV 会根据运行环境得到不同的值的
// build之后上线的环境，就是生产环境
// 开发过程的环境，就是开发环境

const BASEURL =
  process.env.NODE_ENV === "development" ? "/api" : "/yuantiku_api";

// !!!注意：我们目前所学习的是typescript，文件后缀名是ts，如果写的是jsx的代码 那么后缀名改为tsx
// 参数的位置的顺序：将高频的放前方，将低频放后方, 有默认值的，要放在最后面
export default function (
  url: string,
  data: object = {}, // 给了默认值
  headers: RawAxiosRequestHeaders = {}, // 给了默认值
  method: Method = "POST" // 给了默认值
) {
  return new Promise<IResponseData>((resolve, reject) => {
    headers = Object.assign({}, headers, {
      // 写死，每一个请求都会携带上
      "x-auth-token": redux.getState().user.token,
    });

    // 底层的组件
    axios({
      url: BASEURL + url,
      method: method, // 不限制大小写
      headers: headers,
      params: method === "GET" ? data : null,
      data: ["POST", "PUT"].includes(method) ? data : null,
      responseType: "json",
      // timeout: 3000,
    })
      .then((res) => {
        resolve(res.data);
      })
      // 当响应头响应的状态为：500、404、
      .catch((err) => {
        // 询问后端
        if (err.response?.data?.errCode === 1002) {
          // 用户登录失效
          // 跳转到登录页
          router.navigate("/login");

          // 还会往下执行？
          // console.log("aaaaaaa");
          // 会往下执行
        }

        // try catch
        reject(err); // 抛出错误
      });
  });
}

/* 
  js
  jsx
  ts
  tsx
*/
